/* eslint-disable import/no-anonymous-default-export */
/* eslint-disable jsx-a11y/anchor-is-valid */
import "./style.scss";
import AiLogo from "../../assets/img/aipin-logo.png";
import {
  ShareAltOutlined,
  EditOutlined,
  FilterOutlined,
  BulbOutlined,
  FieldTimeOutlined,
  LoadingOutlined,
  CheckOutlined,
  CheckCircleFilled,
  ExclamationCircleFilled,
  CloseCircleFilled,
  EnvironmentOutlined,
  ClockCircleOutlined,
  ReadOutlined,
  ArrowRightOutlined,
  DeleteOutlined,
  PlusOutlined
} from "@ant-design/icons";
import {Cascader, Flex, Radio} from 'antd';
import {useContext, useEffect, useState} from 'react'
import { useNavigate, NavLink } from "react-router";
import {UserContext} from '../../store/user'
import {getRecommendList} from '../../api/profile'

import cityOptions from '../../components/DivisionsOfZhong/index'

export default () => {

  const ctx = useContext(UserContext)
  // console.log('ctx=', ctx)
  const [recommendList, setRecommendList] = useState([])
  const user = ctx.user

  useEffect(()=>{
    ;(async()=>{
      let res = await getRecommendList({loginBizId: user.loginBizId, userType: user.userType})
      // console.log('推荐职位列表: ', res.result??[])
      setRecommendList(res.result??[]);
    })();
  }, []);

  return (
    <div className="font-sans text-gray-800 min-h-screen flex flex-col bg-gray-50 user-profile-page">
      <header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm">
        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center">
            {/* <a href="javascript:;" className="text-2xl font-['Pacifico'] text-primary mr-10">
              艾聘 AIPIN
            </a> */}
            <a href="javascript:;">
              <img className="block" src={AiLogo} alt="" width="100" />
            </a>
            {/* <nav className="hidden md:flex items-center space-x-8">
              <a
                href="javascript:;"
                className="text-gray-700 hover:text-primary transition-colors"
              >
                首页
              </a>
              <a
                href="javascript:;"
                className="text-gray-700 hover:text-primary transition-colors"
              >
                职位
              </a>
              <a
                href="javascript:;"
                className="text-gray-700 hover:text-primary transition-colors"
              >
                消息
              </a>
              <a
                href="javascript:;"
                className="text-primary font-medium border-b-2 border-primary pb-1"
              >
                我的
              </a>
            </nav> */}
          </div>
          <div className="flex items-center space-x-6">
            <div className="relative hidden">
              <div className="w-10 h-10 flex items-center justify-center text-gray-500 cursor-pointer hover:text-primary transition-colors">
                <i className="ri-notification-3-line ri-xl"></i>
              </div>
              <div className="absolute top-1 right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-xs text-white">
                3
              </div>
            </div>
            <div className="relative group">
              <div className="flex items-center space-x-2 cursor-pointer pb-4">
                <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
                  <span>{user.userName && user.userName.slice(0, 1)}</span>
                </div>
                <span className="hidden md:block">{user.userName}</span>
              </div>
              <div className="absolute right-0 -mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden group-hover:block">
                {/* <a
                  href="javascript:;"
                  className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                >
                  <div className="flex items-center">
                    <span>个人资料</span>
                  </div>
                </a>
                <a
                  href="javascript:;"
                  className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                >
                  <div className="flex items-center">
                    <span>账号设置</span>
                  </div>
                </a> */}
                <a
                  onClick={()=>{
                    // alert(123);
                    ctx.logout()
                  }}
                  data-readdy="true"
                  className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                >
                  <div className="flex items-center">
                    <span>退出登录</span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main className="flex-grow pt-20 pb-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row gap-6">
            <div className="lg:w-3/4 space-y-6">
              <div className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex flex-col md:flex-row gap-6">
                  <div className="md:w-1/4 flex flex-col items-center">
                    <div className="w-28 h-28 rounded-full bg-primary flex items-center justify-center text-white text-3xl mb-3">
                      <span>{ user.userName&&user.userName.slice(0, 1)}</span>
                    </div>
                    <h2 className="text-xl font-semibold text-center">{user.userName}</h2>
                    <p className="text-gray-500 text-center mb-4">
                      {user.jobPosition} / {user.workingYears}年经验
                    </p>
                    <div className="flex space-x-3">
                      <button className="bg-primary bg-opacity-10 text-primary px-3 py-1.5 rounded-full text-sm font-medium hover:bg-opacity-20 transition-colors whitespace-nowrap">
                        <div className="flex items-center">
                          <EditOutlined />
                          {/* NavLink */}
                          <NavLink to={"/resume/edit/"+user.id} >编辑资料</NavLink>
                          {/* <span>编辑资料</span> */}
                        </div>
                      </button>
                      <button className="bg-gray-100 text-gray-600 px-3 py-1.5 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors whitespace-nowrap">
                        <div className="flex items-center">
                          <ShareAltOutlined />
                          <span>分享</span>
                        </div>
                      </button>
                    </div>
                  </div>
                  <div className="md:w-3/4">
                    <div className="flex flex-col md:flex-row justify-between mb-6">
                      <div>
                        <h3 className="text-lg font-semibold mb-1">
                          简历完整度
                        </h3>
                        <p className="text-gray-500 text-sm mb-3">
                          完善您的简历以获得更多面试机会
                        </p>
                      </div>
                      <div className="flex items-center">
                        <span className="text-primary font-semibold mr-2">
                          85%
                        </span>
                        <button className="text-primary text-sm hover:underline whitespace-nowrap">
                          查看详情
                        </button>
                      </div>
                    </div>
                    <div className="progress-bar mb-6">
                      <div
                        className="progress-bar-fill"
                        style={{ width: "85%" }}
                      ></div>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="bg-gray-50 rounded-lg p-4">
                        <div className="flex justify-between items-start mb-2">
                          <h4 className="font-medium">基本信息</h4>
                          <CheckCircleFilled style={{ color: "#22c55e" }} />
                        </div>
                        <div className="w-full h-1 bg-gray-200 rounded-full mb-2">
                          <div
                            className="h-full bg-green-500 rounded-full"
                            style={{ width: "100%" }}
                          ></div>
                        </div>
                        <p className="text-gray-500 text-sm">已完成</p>
                      </div>
                      <div className="bg-gray-50 rounded-lg p-4">
                        <div className="flex justify-between items-start mb-2">
                          <h4 className="font-medium">工作经历</h4>
                          <ExclamationCircleFilled
                            style={{ color: "#eab308" }}
                          />
                        </div>
                        <div className="w-full h-1 bg-gray-200 rounded-full mb-2">
                          <div
                            className="h-full bg-yellow-500 rounded-full"
                            style={{ width: "75%" }}
                          ></div>
                        </div>
                        <p className="text-gray-500 text-sm">需补充项目详情</p>
                      </div>
                      <div className="bg-gray-50 rounded-lg p-4">
                        <div className="flex justify-between items-start mb-2">
                          <h4 className="font-medium">技能证书</h4>
                          <CloseCircleFilled style={{ color: "#ef4444" }} />
                        </div>
                        <div className="w-full h-1 bg-gray-200 rounded-full mb-2">
                          <div
                            className="h-full bg-red-500 rounded-full"
                            style={{ width: "30%" }}
                          ></div>
                        </div>
                        <p className="text-gray-500 text-sm">未上传证书</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-xl font-semibold">推荐职位</h2>
                  <a
                    href="javascript:;"
                    className="text-primary hover:underline flex items-center"
                  >
                    <span>查看全部</span>
                    <ArrowRightOutlined />
                  </a>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div className="flex justify-between items-start mb-3">
                      <h3 className="font-semibold text-lg">高级产品经理</h3>
                      <div className="text-primary font-medium">
                        25-35K·14薪
                      </div>
                    </div>
                    <div className="flex items-center mb-3">
                      <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                        <span className="text-xs text-blue-600">腾</span>
                      </div>
                      <span className="text-gray-700">腾讯科技</span>
                    </div>
                    <div className="flex items-center text-sm text-gray-500 mb-4">
                      <div className="flex items-center mr-3">
                        <EnvironmentOutlined />
                        <span>深圳</span>
                      </div>
                      <div className="flex items-center mr-3">
                        <ClockCircleOutlined />
                        <span>5-10年</span>
                      </div>
                      <div className="flex items-center">
                        <ReadOutlined />
                        <span>本科及以上</span>
                      </div>
                    </div>
                    <div className="flex flex-wrap gap-2 mb-4">
                      <span className="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded-full">
                        产品规划
                      </span>
                      <span className="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded-full">
                        用户增长
                      </span>
                      <span className="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded-full">
                        数据分析
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <div className="text-sm text-green-600">
                        <div className="flex items-center">
                          <CheckOutlined />
                          <span>匹配度 92%</span>
                        </div>
                      </div>
                      <button className="bg-primary text-white px-3 py-1.5 !rounded-button hover:bg-blue-600 transition-colors text-sm whitespace-nowrap">
                        立即申请
                      </button>
                    </div>
                  </div>

                  <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div className="flex justify-between items-start mb-3">
                      <h3 className="font-semibold text-lg">高级产品经理</h3>
                      <div className="text-primary font-medium">
                        25-35K·14薪
                      </div>
                    </div>
                    <div className="flex items-center mb-3">
                      <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                        <span className="text-xs text-blue-600">腾</span>
                      </div>
                      <span className="text-gray-700">腾讯科技</span>
                    </div>
                    <div className="flex items-center text-sm text-gray-500 mb-4">
                      <div className="flex items-center mr-3">
                        <EnvironmentOutlined />
                        <span>深圳</span>
                      </div>
                      <div className="flex items-center mr-3">
                        <ClockCircleOutlined />
                        <span>5-10年</span>
                      </div>
                      <div className="flex items-center">
                        <ReadOutlined />
                        <span>本科及以上</span>
                      </div>
                    </div>
                    <div className="flex flex-wrap gap-2 mb-4">
                      <span className="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded-full">
                        产品规划
                      </span>
                      <span className="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded-full">
                        用户增长
                      </span>
                      <span className="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded-full">
                        数据分析
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <div className="text-sm text-green-600">
                        <div className="flex items-center">
                          <CheckOutlined />
                          <span>匹配度 92%</span>
                        </div>
                      </div>
                      <button className="bg-primary text-white px-3 py-1.5 !rounded-button hover:bg-blue-600 transition-colors text-sm whitespace-nowrap">
                        立即申请
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              {/* 求职期望 */}
              <div className="mt-6 hidden">
                <div className="flex justify-between items-center mb-4">
                  <h3 className="text-lg font-medium">求职期望</h3>
                  <button
                    id="addJobPreference"
                    className="text-primary flex items-center text-sm"
                  >
                    <PlusOutlined />
                    添加期望
                  </button>
                </div>
                <div id="jobPreferencesList">
                  <div className="job-preference-item border rounded-lg p-4 mb-4">
                    <div className="flex justify-between items-start mb-4">
                      <span className="font-medium">期望 1</span>
                      <button className="delete-preference text-gray-400 hover:text-red-500">
                        <DeleteOutlined />
                      </button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          期望职位
                        </label>
                        <div className="relative">
                          <input
                            type="text"
                            className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                            placeholder="请输入期望职位"
                            defaultValue="高级产品经理"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          办公地点
                        </label>
                        <div className="relative">
                          {/* <input
                            type="text"
                            className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                            placeholder="请选择城市"
                            defaultValue="深圳"
                          /> */}
                          <Cascader options={cityOptions} placeholder="请选择城市" style={{width: '100%'}} size="large" />
                          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <EnvironmentOutlined />
                          </div>
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          是否接受远程
                        </label>
                        <div className="flex items-center space-x-4">
                          <Radio.Group block options={[
                            { label: '是', value: 'Y' },
                            { label: '否', value: 'N' },
                          ]}  />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          期望薪资
                        </label>
                        <div className="flex items-center space-x-2">
                          <div className="relative">
                            <input
                              type="number"
                              className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                              placeholder="最低"
                              defaultValue="25"
                            />
                          </div>
                          <span className="text-gray-500">-</span>
                          <div className="relative">
                            <input
                              type="number"
                              className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                              placeholder="最高"
                              defaultValue="35"
                            />
                          </div>
                          <span className="text-gray-500 whitespace-nowrap">
                            K/月
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-4 flex justify-end">
                  <button className="bg-primary text-white px-4 py-2 rounded !rounded-button whitespace-nowrap">
                    保存期望
                  </button>
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-xl font-semibold">申请进度</h2>
                  <div className="flex items-center">
                    <div className="relative mr-4">
                      <button className="flex items-center text-gray-600 hover:text-primary transition-colors">
                        <span className="mr-1">筛选</span>
                        <FilterOutlined />
                      </button>
                    </div>
                    <a
                      href="javascript:;"
                      className="text-primary hover:underline flex items-center"
                    >
                      <span>查看全部</span>
                      <ArrowRightOutlined />
                    </a>
                  </div>
                </div>
                <div className="space-y-6">
                  <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
                      <div>
                        <h3 className="font-semibold text-lg">高级产品经理</h3>
                        <div className="flex items-center text-gray-600 mt-1">
                          <div className="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                            <span className="text-xs text-blue-600">腾</span>
                          </div>
                          <span>腾讯科技</span>
                          <span className="mx-2">|</span>
                          <span>深圳</span>
                        </div>
                      </div>
                      <div className="mt-3 md:mt-0 flex items-center">
                        <div className="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-medium">
                          面试邀请
                        </div>
                        <span className="text-gray-500 text-sm ml-4">
                          2025-04-12 更新
                        </span>
                      </div>
                    </div>
                    <div className="relative">
                      <div className="absolute left-3 top-0 bottom-0 w-0.5 bg-gray-200"></div>
                      <div className="space-y-6 relative">
                        <div className="flex">
                          <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white z-10 flex-shrink-0">
                            <CheckOutlined />
                          </div>
                          <div className="ml-4">
                            <div className="flex items-center">
                              <h4 className="font-medium">简历投递成功</h4>
                              <span className="text-gray-500 text-sm ml-3">
                                2025-04-08
                              </span>
                            </div>
                            <p className="text-gray-500 text-sm mt-1">
                              您的简历已成功投递，请耐心等待企业筛选
                            </p>
                          </div>
                        </div>
                        <div className="flex">
                          <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white z-10 flex-shrink-0">
                            <CheckOutlined />
                          </div>
                          <div className="ml-4">
                            <div className="flex items-center">
                              <h4 className="font-medium">简历筛选通过</h4>
                              <span className="text-gray-500 text-sm ml-3">
                                2025-04-10
                              </span>
                            </div>
                            <p className="text-gray-500 text-sm mt-1">
                              恭喜您通过简历筛选，企业将尽快安排面试
                            </p>
                          </div>
                        </div>
                        <div className="flex">
                          <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white z-10 flex-shrink-0">
                            <CheckOutlined />
                          </div>
                          <div className="ml-4">
                            <div className="flex items-center">
                              <h4 className="font-medium">面试邀请</h4>
                              <span className="text-gray-500 text-sm ml-3">
                                2025-04-12
                              </span>
                            </div>
                            <p className="text-gray-500 text-sm mt-1">
                              企业已发出面试邀请，请及时查看并确认
                            </p>
                            <div className="mt-3">
                              <button className="bg-primary text-white px-4 py-2 !rounded-button hover:bg-blue-600 transition-colors text-sm mr-3 whitespace-nowrap">
                                接受邀请
                              </button>
                              <button className="bg-white border border-gray-300 text-gray-700 px-4 py-2 !rounded-button hover:bg-gray-50 transition-colors text-sm whitespace-nowrap">
                                调整时间
                              </button>
                            </div>
                          </div>
                        </div>
                        <div className="flex">
                          <div className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 z-10 flex-shrink-0">
                            <FieldTimeOutlined />
                          </div>
                          <div className="ml-4">
                            <h4 className="font-medium text-gray-400">面试</h4>
                            <p className="text-gray-400 text-sm mt-1">
                              等待面试结果...
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
                      <div>
                        <h3 className="font-semibold text-lg">
                          产品经理-电商方向
                        </h3>
                        <div className="flex items-center text-gray-600 mt-1">
                          <div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center mr-2">
                            <span className="text-xs text-red-600">京</span>
                          </div>
                          <span>京东科技</span>
                          <span className="mx-2">|</span>
                          <span>北京</span>
                        </div>
                      </div>
                      <div className="mt-3 md:mt-0 flex items-center">
                        <div className="bg-yellow-100 text-yellow-600 px-3 py-1 rounded-full text-sm font-medium">
                          简历筛选中
                        </div>
                        <span className="text-gray-500 text-sm ml-4">
                          2025-04-14 更新
                        </span>
                      </div>
                    </div>
                    <div className="relative">
                      <div className="absolute left-3 top-0 bottom-0 w-0.5 bg-gray-200"></div>
                      <div className="space-y-6 relative">
                        <div className="flex">
                          <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white z-10 flex-shrink-0">
                            <CheckOutlined />
                          </div>
                          <div className="ml-4">
                            <div className="flex items-center">
                              <h4 className="font-medium">简历投递成功</h4>
                              <span className="text-gray-500 text-sm ml-3">
                                2025-04-14
                              </span>
                            </div>
                            <p className="text-gray-500 text-sm mt-1">
                              您的简历已成功投递，请耐心等待企业筛选
                            </p>
                          </div>
                        </div>
                        <div className="flex">
                          <div className="w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center text-white z-10 flex-shrink-0 animate-pulse-slow">
                            <LoadingOutlined />
                          </div>
                          <div className="ml-4">
                            <h4 className="font-medium">简历筛选中</h4>
                            <p className="text-gray-500 text-sm mt-1">
                              企业正在审核您的简历，请耐心等待
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-xl font-semibold">技能评估</h2>
                  <a
                    href="javascript:;"
                    className="text-primary hover:underline flex items-center"
                  >
                    <span>查看详情</span>
                    <ArrowRightOutlined />
                  </a>
                </div>
                <div className="flex flex-col lg:flex-row gap-6">
                  <div className="lg:w-1/3">
                    <div className="bg-gray-50 rounded-lg p-6 text-center">
                      <div className="text-5xl font-bold text-primary mb-2">
                        86
                      </div>
                      <div className="text-gray-500 mb-4">综合能力评分</div>
                      <div className="flex justify-center mb-6">
                        <div className="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-medium">
                          优秀
                        </div>
                      </div>
                      <div className="text-sm text-gray-600">
                        超过了{" "}
                        <span className="text-primary font-medium">78%</span>{" "}
                        的产品经理
                      </div>
                    </div>
                    <div className="mt-4">
                      <button className="w-full bg-primary text-white py-2.5 !rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap">
                        <div className="flex items-center justify-center">
                          <span>参加更多评估</span>
                        </div>
                      </button>
                    </div>
                  </div>
                  <div className="lg:w-2/3">
                    <div id="skill-chart" className="skill-chart"></div>
                  </div>
                </div>
                <div className="mt-6 border-t border-gray-100 pt-6">
                  <h3 className="font-medium mb-4">提升建议</h3>
                  <div className="space-y-4">
                    <div className="flex">
                      <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3 flex-shrink-0">
                        <BulbOutlined />
                      </div>
                      <div>
                        <h4 className="font-medium">增强数据分析能力</h4>
                        <p className="text-gray-600 text-sm mt-1">
                          建议学习SQL、Python等数据分析工具，提升数据驱动决策能力
                        </p>
                      </div>
                    </div>
                    <div className="flex">
                      <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3 flex-shrink-0">
                        <BulbOutlined />
                      </div>
                      <div>
                        <h4 className="font-medium">提升用户研究方法</h4>
                        <p className="text-gray-600 text-sm mt-1">
                          建议系统学习用户访谈、可用性测试等用户研究方法，提升用户洞察能力
                        </p>
                      </div>
                    </div>
                    <div className="flex">
                      <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3 flex-shrink-0">
                        <BulbOutlined />
                      </div>
                      <div>
                        <h4 className="font-medium">增加项目管理经验</h4>
                        <p className="text-gray-600 text-sm mt-1">
                          建议学习敏捷开发、Scrum等项目管理方法，提升项目协调和推进能力
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="lg:w-1/4 space-y-6">
              <div className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex justify-between items-center mb-4">
                  <h2 className="font-semibold">近期活动</h2>
                  <div className="flex items-center text-sm text-gray-500">
                    <span>2025年4月</span>
                    <div className="flex ml-2">
                      <button className="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-gray-600">
                        <i className="ri-arrow-left-s-line"></i>
                      </button>
                      <button className="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-gray-600">
                        <i className="ri-arrow-right-s-line"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div className="mb-4">
                  <div className="grid grid-cols-7 text-center text-xs text-gray-500 mb-2">
                    <div>一</div>
                    <div>二</div>
                    <div>三</div>
                    <div>四</div>
                    <div>五</div>
                    <div>六</div>
                    <div>日</div>
                  </div>
                  <div className="grid grid-cols-7 gap-1 text-center text-sm">
                    <div className="py-2 text-gray-400">29</div>
                    <div className="py-2 text-gray-400">30</div>
                    <div className="py-2 text-gray-400">31</div>
                    <div className="py-2">1</div>
                    <div className="py-2">2</div>
                    <div className="py-2">3</div>
                    <div className="py-2">4</div>
                    <div className="py-2">5</div>
                    <div className="py-2">6</div>
                    <div className="py-2">7</div>
                    <div className="py-2">8</div>
                    <div className="py-2">9</div>
                    <div className="py-2">10</div>
                    <div className="py-2">11</div>
                    <div className="py-2">12</div>
                    <div className="py-2">13</div>
                    <div className="py-2">14</div>
                    <div className="py-2 relative">
                      15
                      <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></div>
                    </div>
                    <div className="py-2 text-white bg-primary rounded">16</div>
                    <div className="py-2 relative">
                      17
                      <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></div>
                    </div>
                    <div className="py-2">18</div>
                    <div className="py-2">19</div>
                    <div className="py-2">20</div>
                    <div className="py-2">21</div>
                    <div className="py-2">22</div>
                    <div className="py-2">23</div>
                    <div className="py-2">24</div>
                    <div className="py-2">25</div>
                    <div className="py-2">26</div>
                    <div className="py-2">27</div>
                    <div className="py-2">28</div>
                    <div className="py-2">29</div>
                    <div className="py-2">30</div>
                    <div className="py-2 text-gray-400">1</div>
                  </div>
                </div>
                <div className="space-y-3">
                  <div className="flex items-start">
                    <div className="w-3 h-3 rounded-full bg-primary mt-1.5 mr-2 flex-shrink-0"></div>
                    <div>
                      <div className="font-medium">腾讯科技面试</div>
                      <div className="text-sm text-gray-500">
                        4月16日 14:30-16:00
                      </div>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="w-3 h-3 rounded-full bg-yellow-500 mt-1.5 mr-2 flex-shrink-0"></div>
                    <div>
                      <div className="font-medium">产品经理沙龙</div>
                      <div className="text-sm text-gray-500">
                        4月17日 19:00-21:00
                      </div>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="w-3 h-3 rounded-full bg-green-500 mt-1.5 mr-2 flex-shrink-0"></div>
                    <div>
                      <div className="font-medium">数据分析课程</div>
                      <div className="text-sm text-gray-500">
                        4月15日 20:00-21:30
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex justify-between items-center mb-4">
                  <h2 className="font-semibold">学习资源</h2>
                  <a
                    href="javascript:;"
                    className="text-primary hover:underline text-sm"
                  >
                    更多
                  </a>
                </div>
                <div className="space-y-4">
                  <div className="flex items-start">
                    <div className="w-10 h-10 rounded bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                      <div className="w-5 h-5 flex items-center justify-center text-blue-600">
                        <i className="ri-book-open-line"></i>
                      </div>
                    </div>
                    <div>
                      <h3 className="font-medium">产品经理数据分析实战</h3>
                      <div className="flex items-center text-sm text-gray-500 mt-1">
                        <div className="flex items-center">
                          <div className="w-3 h-3 flex items-center justify-center mr-1">
                            <i className="ri-user-line"></i>
                          </div>
                          <span>张志远</span>
                        </div>
                        <span className="mx-2">·</span>
                        <span>4.9分</span>
                      </div>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="w-10 h-10 rounded bg-green-100 flex items-center justify-center mr-3 flex-shrink-0">
                      <div className="w-5 h-5 flex items-center justify-center text-green-600">
                        <i className="ri-video-line"></i>
                      </div>
                    </div>
                    <div>
                      <h3 className="font-medium">用户研究方法与实践</h3>
                      <div className="flex items-center text-sm text-gray-500 mt-1">
                        <div className="flex items-center">
                          <div className="w-3 h-3 flex items-center justify-center mr-1">
                            <i className="ri-user-line"></i>
                          </div>
                          <span>李晓华</span>
                        </div>
                        <span className="mx-2">·</span>
                        <span>4.8分</span>
                      </div>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="w-10 h-10 rounded bg-purple-100 flex items-center justify-center mr-3 flex-shrink-0">
                      <div className="w-5 h-5 flex items-center justify-center text-purple-600">
                        <i className="ri-article-line"></i>
                      </div>
                    </div>
                    <div>
                      <h3 className="font-medium">产品经理面试指南</h3>
                      <div className="flex items-center text-sm text-gray-500 mt-1">
                        <div className="flex items-center">
                          <div className="w-3 h-3 flex items-center justify-center mr-1">
                            <i className="ri-user-line"></i>
                          </div>
                          <span>王思聪</span>
                        </div>
                        <span className="mx-2">·</span>
                        <span>4.7分</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex justify-between items-center mb-4">
                  <h2 className="font-semibold">职业发展</h2>
                  <a
                    href="javascript:;"
                    className="text-primary hover:underline text-sm"
                  >
                    详情
                  </a>
                </div>
                <div className="mb-4">
                  <div className="flex items-center justify-between mb-2">
                    <div className="text-sm text-gray-600">当前阶段</div>
                    <div className="text-sm font-medium">中级产品经理</div>
                  </div>
                  <div className="w-full h-2 bg-gray-100 rounded-full">
                    <div
                      className="h-full bg-primary rounded-full"
                      style={{ width: "65%" }}
                    ></div>
                  </div>
                </div>
                <div className="space-y-4">
                  <div className="flex items-start">
                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3 flex-shrink-0">
                      <div className="w-4 h-4 flex items-center justify-center text-gray-500">
                        <i className="ri-flag-line"></i>
                      </div>
                    </div>
                    <div>
                      <h3 className="font-medium">下一目标</h3>
                      <p className="text-sm text-gray-600 mt-1">
                        高级产品经理 (预计1-2年)
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3 flex-shrink-0">
                      <div className="w-4 h-4 flex items-center justify-center text-gray-500">
                        <i className="ri-award-line"></i>
                      </div>
                    </div>
                    <div>
                      <h3 className="font-medium">核心能力</h3>
                      <p className="text-sm text-gray-600 mt-1">
                        需提升：团队管理、战略规划
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3 flex-shrink-0">
                      <div className="w-4 h-4 flex items-center justify-center text-gray-500">
                        <i className="ri-building-line"></i>
                      </div>
                    </div>
                    <div>
                      <h3 className="font-medium">推荐企业</h3>
                      <p className="text-sm text-gray-600 mt-1">
                        腾讯、阿里巴巴、字节跳动
                      </p>
                    </div>
                  </div>
                </div>
                <div className="mt-4">
                  <button className="w-full bg-white border border-primary text-primary py-2 !rounded-button hover:bg-blue-50 transition-colors text-sm whitespace-nowrap">
                    <div className="flex items-center justify-center">
                      <div className="w-4 h-4 flex items-center justify-center mr-1">
                        <i className="ri-roadmap-line"></i>
                      </div>
                      <span>查看职业规划</span>
                    </div>
                  </button>
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-sm p-6">
                <h2 className="font-semibold mb-4">订阅设置</h2>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="text-gray-700">职位推送</div>
                    <label className="custom-switch">
                      <input type="checkbox" defaultChecked />
                      <span className="switch-slider"></span>
                    </label>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="text-gray-700">面试提醒</div>
                    <label className="custom-switch">
                      <input type="checkbox" defaultChecked />
                      <span className="switch-slider"></span>
                    </label>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="text-gray-700">学习资源</div>
                    <label className="custom-switch">
                      <input type="checkbox" defaultChecked />
                      <span className="switch-slider"></span>
                    </label>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="text-gray-700">行业动态</div>
                    <label className="custom-switch">
                      <input type="checkbox" />
                      <span className="switch-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="bg-gray-100 py-6">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-500 text-sm mb-4 md:mb-0">
              © 2025 艾聘 AIPIN. 保留所有权利
            </p>
            <div className="flex space-x-4">
              <a
                href="javascript:;"
                className="text-gray-500 hover:text-gray-700 text-sm"
              >
                关于我们
              </a>
              <a
                href="javascript:;"
                className="text-gray-500 hover:text-gray-700 text-sm"
              >
                隐私政策
              </a>
              <a
                href="javascript:;"
                className="text-gray-500 hover:text-gray-700 text-sm"
              >
                用户协议
              </a>
              <a
                href="javascript:;"
                className="text-gray-500 hover:text-gray-700 text-sm"
              >
                帮助中心
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};
